<template>
  <div class="order-detail-header-container">
    <div
      v-if="
        new Date().getTime() <=
        new Date(info?.createTime).getTime() + 5 * 60 * 1000
      "
      class="timer"
    >
      <div>待支付</div>
      <nut-countdown
        :startTime="new Date().getTime()"
        :endTime="new Date(info?.createTime).getTime() + 5 * 60 * 1000"
        @on-end="TimerOver(info)"
      ></nut-countdown>
    </div>

    <nut-cell>
      <div class="container-top">
        <div class="container-top-row1">
          <div class="container-top-row1-number">
            共{{ info?.seatData.length }}张
          </div>
          <div class="img">
            <image
              style="width: 90px; border-radius: 3px"
              mode="widthFix"
              :src="info?.moviePoster"
            ></image>
          </div>
          <div class="container-top-row1-right">
            <div class="container-top-row1-right-name">
              <div class="container-top-row1-right-name-left">
                {{ info?.movieName }}
              </div>
              <div></div>
            </div>
            <div class="container-top-row1-right-time">
              <div>{{ info?.startTime }}</div>
              <div class="container-top-row1-right-time-red">开场</div>
            </div>
            <div class="container-top-row1-right-room">
              {{ info?.hallName }}
            </div>
            <div class="container-top-row1-right-address">
              <div class="container-top-row1-right-address-text">
                {{ info?.cinemaName }}
              </div>
            </div>
            <div class="container-top-row1-right-position">
              {{ formatSeatData() }}
            </div>
          </div>
        </div>
        <nut-divider />
        <div class="container-top-row2">
          <div class="container-top-row2-left">
            <div class="container-top-row2-left-item">
              <Issue color="#FFC800" />
              <div class="container-top-row2-left-item-name">不支持退票</div>
            </div>
            <div class="container-top-row2-left-item">
              <Issue color="#FFC800" />
              <div class="container-top-row2-left-item-name">不支持改签</div>
            </div>
          </div>
        </div>
      </div>
    </nut-cell>
  </div>
</template>
<script setup lang="ts">
import { Issue } from "@nutui/icons-vue-taro";
import { computed, toRefs } from "vue";
import Taro from "@tarojs/taro";

const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Object,
});
//使用父组件传递过来的值
const { info } = toRefs(props);
// 【格式化】座位数据
const formatSeatData = computed(() => {
  return () => {
    const arr = info?.value?.seatData.map((item) => {
      return item.seatNo;
    });
    return arr.join(",");
  };
});
const TimerOver = (e) => {
  console.log("时间结束");
  console.log(e, "----------------");
  e.orderProgress = -1;
  Taro.showToast({
    title: "订单已超时",
    icon: "none",
  });
  setTimeout(() => {
    Taro.navigateBack({
      delta:1
    });
  }, 500);
};
</script>
<style lang="scss">
.order-detail-header-container {
  position: relative;
  .timer {
    position: absolute;
    z-index: 1;
    bottom: 10%;
    right: 5%;
    color: #ee0a24;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    .nut-countdown {
      font-size: 24px !important;
      margin-left: 10px;
    }
  }
  display: flex;
  flex-direction: column;
  .container-top {
    flex: 1;
    .nut-divider {
      margin: 24px 0;
      color: #f6f8f9 !important;
      border-color: #f6f8f9 !important;
    }
    .container-top-row1 {
      display: flex;
      position: relative;
      .container-top-row1-number {
        position: absolute;
        top: 5px;
        right: 5px;
        color: #858a99;
        font-size: 24px;
        text-align: center;
      }
      .img {
        // width: 100px;
        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .container-top-row1-right {
        font-size: 24px;
        margin-left: 25px;
        .container-top-row1-right-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .container-top-row1-right-name-left {
            font-weight: 500;
            color: #15181d;
            font-size: 36px;
            line-height: 42px;
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 10px;
            margin-right: 80px;
            margin-top: 5px;
          }
          .container-top-row1-right-name-right {
            color: #858a99;
            font-size: 24px;
          }
        }
        .container-top-row1-right-time {
          color: #858a99;
          font-size: 24px;
          margin-top: 10px;
          display: flex;
          align-items: center;
          .container-top-row1-right-time-red {
            margin-left: 10px;
          }
        }
        .container-top-row1-right-position {
          color: #858a99;
          font-size: 24px;
          margin-top: 10px;
        }
        .container-top-row1-right-room {
          color: #858a99;
          font-size: 24px;
          margin-top: 10px;
        }
        .container-top-row1-right-address {
          color: #858a99;
          font-size: 24px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 80px;
          .container-top-row1-right-address-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            flex: 1;
          }
        }
      }
    }
    .container-top-row2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .container-top-row2-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .container-top-row2-left-item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 25px;
          .container-top-row2-left-item-name {
            color: #858a99;
            font-size: 24px;
            margin-left: 10px;
          }
        }
      }
      .container-top-row2-right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #858a99;
        .container-top-row2-right-name {
          font-size: 24px;
        }
        .container-top-row2-right-icon {
          font-size: 40px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
